<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>编辑收货地址</title>
    <link rel="stylesheet" href="__ROOT__/public/css/style.css">
    <link rel="stylesheet" href="__ROOT__/public/css/ui.css">
    <script src="__ROOT__/static/plugs/jquery/jquery.min.js"></script>
    <script src="__ROOT__/public/js/common.js"></script>
    <style>
        .form {
            height: 2.2rem;
            line-height: 2.2rem;
            display: flex;
            padding: 0 .5rem;
            border-bottom: 1px solid #eeeeee;
        }

        .form_title {
            color: black;
            width: 25%;
            font-weight: 500;
        }

        .form input {
            border: none;
            outline: none;
        }

        .btn {
            width: 90%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            color: white;
            margin: 5rem auto 0;
            border-radius: 5px;
            background: #8BC34A;
        }
    </style>
</head>

<body>
    <header>
        <div class="back" onclick="window.history.back(-1)"></div>
        <span>编辑收货地址</span>
    </header>
    <div class="container">
        <div class="form">
            <div class="form_title">收货人姓名</div>
            <input type="text" id="name" placeholder="请填写姓名">
        </div>
        <div class="form">
            <div class="form_title">地区</div>
            <div class="area" id="area_s" style="color: #777777;">请选择收货地址</div>
            <input type="hidden" name="" id="area">
        </div>
        <div class="form">
            <div class="form_title">详细地址</div>
            <input type="text" placeholder="请填写详细地址" id="site">
        </div>
        <div class="form">
            <div class="form_title">手机</div>
            <input type="text" placeholder="请填写手机号" id="phone">
        </div>
        <div class="btn">确定</div>
    </div>
</body>
<script src="__ROOT__/public/js/city.js"></script>
<script src="__ROOT__/public/js/picker.min.js"></script>
<script src="__ROOT__/public/js/index.js"></script>
<script src="__ROOT__/public/js/ui.js"></script>
<script>
    var submit = true,
        site_id = sessionStorage.getItem("site_id");
    $(function() {
        $.ajax({
            url: urlPost('my/edit_address'),
            type: "GET",
            dataType: "JSON",
            data: { id: site_id },
            success: function(res) {
                if (res.code == 0) {
                    $("#name").val(res.data.name);
                    $("#area_s").html(res.data.area);
                    $("#area").val(res.data.area);
                    $("#site").val(res.data.address);
                    $('#phone').val(res.data.tel)
                }
            },
            error: function(err) { console.log(err) }
        })
    })

    // 提交事件
    $(".btn").click(function() {
        var name = $("#name").val(),//姓名
            area = $('#area').val(),//地区
            site = $('#site').val(),//详细地址
            phone = $('#phone').val();//手机号
        if (name == "") {
            QS_toast.show('请输入收货人姓名', true)
        } else if (area == "") {
            QS_toast.show('请选择收货地址', true)
        } else if (site == "") {
            QS_toast.show('请填写详细收货地址', true)
        } else if (phone == "") {
            QS_toast.show('请输入手机号', true)
        } else if (!(/^1[3456789]\d{9}$/.test(phone))) {
            $('#phone').val("")
            QS_toast.show('手机号码有误', true)
        } else {
            var data = { id: site_id, name:name, tel: phone, address: site, area: area }
            if (submit) {
                submit = false;
                $.ajax({
                    url: urlPost('my/edit_address'),
                    type: "POST",
                    dataType: "JSON",
                    data:data,
                    success: function(res) {
                        console.log(res)
                        if (res.code == 0) {
                            QS_toast.show(res.info, true)
                        } else {
                            QS_toast.show(res.info, true)
                        }
                        submit = true;
                    },
                    error: function(err) { console.log(err) }
                })
            }
        }
    })
</script>

</html>